<template>
  <div class='not-single' id='not-app-article'>
    <div class="flex flex-col">
      <div class="message-area">
        <div class="relative">
          <StarrySky />
          <div class='message-aside-comment'>
            <article class='message-title'>
              <span>一生中交一个朋友谓之足，交两个朋友谓之多，交三个朋友谓之难得<br>
                能遇到的同路人，哪怕只是陪伴一段时间，也都是赚到的。每个出现过的人，无论结局如何，我都心存感激
              </span>
            </article>
            <Comment :commentCount='commentCount'/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, computed, provide } from 'vue'
import { useI18n } from 'vue-i18n'
import Breadcrumb from '@/components/Breadcrumb.vue'
import { Comment } from '../components/Comment'
import { useCommentStore } from '@/stores/comment'
import api from '@/api/api'
import emitter from '@/utils/mitt'
import axios from 'axios'
import StarrySky from '@/components/Background/StarrySky.vue'

export default defineComponent({
  name: 'Message',
  components: { StarrySky, Breadcrumb, Comment },
  setup() {
    const { t } = useI18n()
    const commentStore = useCommentStore()
    const reactiveData = reactive({
      comments: [] as any,
      haveMore: false as any,
      isReload: false as any,
      hitokoto: '' as any,
      commentCount: 0 as number
    })
    const pageInfo = reactive({
      current: 1,
      size: 7
    })
    commentStore.type = 2
    onMounted(() => {
      fetchComments()
    })
    provide(
      'comments',
      computed(() => reactiveData.comments)
    )

    provide(
      'haveMore',
      computed(() => reactiveData.haveMore)
    )
    emitter.on('messageFetchComment', () => {
      pageInfo.current = 1
      reactiveData.isReload = true
      fetchComments()
    })
    emitter.on('messageFetchReplies', (index) => {
      fetchReplies(index)
    })
    emitter.on('messageLoadMore', () => {
      fetchComments()
    })
    const fetchComments = () => {
      const params = {
        type: 2,
        topicId: null,
        current: pageInfo.current,
        size: pageInfo.size
      }
      api.getComments(params).then(({ data }) => {
        reactiveData.commentCount=data.data.count
        if (reactiveData.isReload) {
          reactiveData.comments = data.data.records
          reactiveData.isReload = false
        } else {
          reactiveData.comments.push(...data.data.records)
        }
        if (data.data.count <= reactiveData.comments.length) {
          reactiveData.haveMore = false
        } else {
          reactiveData.haveMore = true
        }
        pageInfo.current++
      })
    }
    const fetchReplies = (index: any) => {
      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({ data }) => {
        reactiveData.comments[index].replyDTOs = data.data
      })
    }
    return {
      ...toRefs(reactiveData),
      t
    }
  }
})
</script>
<style scoped>
.message-title{
    animation: var(--animation-ot);
    animation-delay: .3s;
    margin: 1.5em 0;
    font-family: var(--top-font-family);
}
@media (max-width: 768px) {
    .message-title{
        padding-inline: var(--edge-lr);
    }
}
.message-title span{
    margin-inline: auto;
    letter-spacing: .01em;
    line-height: 2.5;
    text-align: justify;
}
.message-aside-comment{
    position: relative;
    margin: clamp(250px,40vmin,500px) auto 0;
    padding-block: 1rem;
    z-index: 2;
}
@media (min-width: 1153px) {
    .message-aside-comment{
        width: 70%;
        margin: var(--edge-tb) 0 0 auto;
    }
}
</style>
